<template>
  <div id="addgoods">
    <div style="background-color: #fff">
      <div class="container-module">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="退款订单号"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入退款订单号"
                  v-model="searchForm.refund_order_no"
                  onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>

              <el-form-item
                class="search-form-item"
                v-if="searchDisplay"
                label="收货人电话"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入收货人电话"
                  v-model="searchForm.phone_number"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                class="search-form-item"
                v-if="searchDisplay"
                label="收货人姓名"
                style="margin: 5px 0"
              >
                <el-input
                  clearable
                  placeholder="请输入收货人姓名"
                  v-model="searchForm.recipient"
                  class="input-with-select"
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
            </div>
          </el-row>
        </el-form>
      </div>
      <div>
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="20"> </el-col>
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="getListWay"
                ></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                        >{{ tableTheadOptions[fruit].label }}</el-checkbox
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="detail_table">
            <el-table
              highlight-current-row
              :data="RefundList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              v-loading="loading"
              height="100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                min-width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    v-if="fruit == 'sku_img' || fruit == 'goods_main_image'"
                    style="width: 40px; height: 40px; margin: 0 auto"
                  >
                    <el-image
                      v-if="scope.row[fruit]"
                      :src="scope.row[fruit]"
                      :preview-src-list="[scope.row[fruit]]"
                    />
                  </div>
                  <div
                    v-else-if="fruit == 'apply_imgs'"
                    style="width: 40px; height: 40px; margin: 0 auto"
                  >
                    <el-image
                      :src="scope.row[fruit][0]"
                      :preview-src-list="scope.row[fruit]"
                    >
                    </el-image>
                  </div>
                  <div v-else-if="fruit == 'type'">
                    <span v-if="scope.row[fruit] == 1"
                      >仅退款</span
                    >
                    <span v-if="scope.row[fruit] == 2"
                      >退货退款</span
                    >
                    <span v-if="scope.row[fruit] == 3"
                      >换货</span
                    >
                  </div>
                  <div v-else-if="fruit == 'addr_province_name'">
                    {{ scope.row.addr_province_name }}
                    {{ scope.row.addr_city_name }}
                    {{ scope.row.addr_district_name }}
                  </div>
                  <div v-else-if="fruit == 'shouhoujilu'">
                    <el-button
                      @click="recordDialogWay(scope.row)"
                      style="margin: 5px"
                      type="text"
                      size="mini"
                    >
                      查看
                    </el-button>
                  </div>
                  <span v-else>

                    <el-tooltip
                      placement="top-start"
                      :content="scope.row[fruit] + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" label="售后状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1">待处理</span>
                  <span v-if="scope.row.status == 2" type="info"
                    >等待客户重新上传资料</span
                  >
                  <span v-if="scope.row.status == 3" type="success"
                    >等待客户寄回商品</span
                  >
                  <span v-if="scope.row.status == 4" type="warning"
                    >等待确认商品</span
                  >
                  <span v-if="scope.row.status == 5" type="info"
                    >商品已确认</span
                  >
                  <span v-if="scope.row.status == 6" type="info"
                    >已重新发货</span
                  >
                  <span v-if="scope.row.status == 7" type="info"
                    >客户已确认收货</span
                  >
                  <span v-if="scope.row.status == 8" type="success"
                    >售后完成</span
                  >
                  <span v-if="scope.row.status == 9" type="danger"
                    >已驳回</span
                  >
                  <span v-if="scope.row.status == 10" type="danger"
                    >已取消售后</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                width="160"
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status == 1 || scope.row.status == 2"
                    v-hasPermi="'platformorder/aftersales/auditing'"
                    type="text"
                    size="mini"
                    @click="drawerHandle(scope.row)"
                  >
                    审核
                  </el-button>
                  <el-divider
                    v-if="scope.row.status == 1 || scope.row.status == 2"
                    direction="vertical"
                  ></el-divider>
                  <el-button
                    v-if="scope.row.status == 4"
                    v-hasPermi="'platformorder/aftersales/confirm_return'"
                    type="text"
                    size="mini"
                    @click="confirmHandle(scope.row)"
                  >
                    确认寄回
                  </el-button>
                  <el-divider
                    v-if="scope.row.status == 4"
                    direction="vertical"
                  ></el-divider>
                  <el-button
                    v-if="scope.row.type == 3 && scope.row.status == 5"
                    v-hasPermi="'platformorder/aftersales/confirm_exchange'"
                    type="text"
                    size="mini"
                    @click="exchangeHandle(scope.row)"
                  >
                    确认换货
                  </el-button>
                  <el-divider
                    v-if="scope.row.type == 3 && scope.row.status == 5"
                    direction="vertical"
                  ></el-divider>
                  <el-button
                    v-if="
                      scope.row.type == 2 &&
                      (scope.row.status == 5 || scope.row.status == 4)
                    "
                    v-hasPermi="'platformorder/aftersales/refund'"
                    type="text"
                    size="mini"
                    @click="refundHandle(scope.row)"
                  >
                    退款
                  </el-button>
                  <el-divider
                    v-if="
                      scope.row.type == 2 &&
                      (scope.row.status == 5 || scope.row.status == 4)
                    "
                    direction="vertical"
                  ></el-divider>
                  <el-button
                    @click="detailsDrawerWay(scope.row)"
                    type="text"
                    size="mini"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col
          >
        </el-row>
        <el-row style="text-align: right">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="searchForm.page"
            :limit.sync="searchForm.count"
            @pagination="getListWay"
          />
        </el-row>
      </div>
    </div>

    <!-- 审核弹框 -->
    <el-dialog
      :append-to-body="true"
      title="审核"
      :close-on-click-modal="false"
      :visible.sync="aftersalesDialog"
      width="800px"
      @close="aftersalesClose"
    >
      <el-row style="position: relative" v-loading="aftersalesLoading">
        <el-form
          label-width="110px"
          :model="aftersalesForm"
          :rules="aftersalesRules"
          ref="aftersalesForm"
        >
          <el-col :span="11">
            <el-form-item label="审核状态" prop="status">
              <el-radio-group
                @change="statusWay"
                v-model="aftersalesForm.status"
              >
                <el-radio :label="1">同意</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="aftersalesForm.status == 2">
            <el-form-item label="是否锁定订单" prop="is_lock">
              <el-radio-group v-model="aftersalesForm.is_lock">
                <el-radio :label="1">锁定</el-radio>
                <el-radio :label="0">不锁定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            :span="22"
            v-if="aftersalesForm.status == 1 && orderInfo.type != 1"
          >
            <el-form-item label="退回渠道" prop="return_type">
              <el-radio-group
                @change="return_typeChange"
                v-model="aftersalesForm.return_type"
              >
                <el-radio :label="1">退回给平台</el-radio>
                <el-radio :label="2"
                  >退回给原供货商({{ orderInfo.supplier_name }})</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            :span="22"
            v-if="
              aftersalesForm.status == 1 &&
              orderInfo.type !== 1 &&
              aftersalesForm.return_type == 2
            "
          >
            <el-form-item label="供货商地址" prop="return_address_id">
              <el-select
                v-loading="supplierLoading"
                element-loading-spinner="el-icon-loading"
                style="width: 100%"
                v-model.trim="aftersalesForm.return_address_id"
                placeholder="请选择供货商收货地址"
              >
                <el-option
                  v-for="item in supplierAddressList"
                  :key="item.id"
                  :label="
                    item.province_name +
                    item.district_name +
                    item.city_name +
                    item.address_details
                  "
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="22"
            v-if="
              aftersalesForm.status == 1 &&
              orderInfo.type !== 1 &&
              aftersalesForm.return_type == 1
            "
          >
            <el-form-item label="平台地址" prop="return_address_id">
              <el-select
                v-loading="supplierLoading"
                element-loading-spinner="el-icon-loading"
                style="width: 100%"
                v-model.trim="aftersalesForm.return_address_id"
                placeholder="请选择平台收货地址"
              >
                <el-option
                  v-for="item in supplierAddressList"
                  :key="item.id"
                  :label="
                    item.province_name +
                    item.district_name +
                    item.city_name +
                    item.address_details
                  "
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="处理意见">
              <el-input
                type="textarea"
                placeholder="请输入处理意见"
                maxlength="200"
                show-word-limit
                clearable
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="aftersalesForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aftersalesDialog = false">取 消</el-button>
        <el-button type="primary" @click="aftersalesSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认收货弹框 -->
    <el-dialog
      title="确认收货"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="confirmDialog"
      width="800px"
      @close="confirmClose"
    >
      <el-row style="position: relative" v-loading="confirmLoading">
        <el-form
          label-width="110px"
          :model="confirmForm"
          :rules="confirmRules"
          ref="confirmForm"
        >
          <!-- <el-col :span="22">
              <el-form-item label="收到货物数量" prop="refund_number">
                <el-input
                  type="text"
                  placeholder="请输入收到货物数量"
                  show-word-limit
                  clearable
                  v-model.trim="confirmForm.refund_number"
                ></el-input>
              </el-form-item>
            </el-col> -->
          <el-col :span="22">
            <el-form-item label="货物图片">
              <logo-upload
                :file-list="imgs"
                :show-file-list="true"
                accept="image/jpeg, image/png"
                @uploadCallback="imgsCallback"
              />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
                clearable
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="confirmForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确认换货弹框 -->
    <el-dialog
      title="确认换货"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="exchangeDialog"
      width="800px"
      @close="exchangeClose"
    >
      <el-row style="position: relative" v-loading="exchangeLoading">
        <el-form
          label-width="110px"
          :model="exchangeForm"
          :rules="exchangeRules"
          ref="exchangeForm"
        >
          <!-- <el-col :span="11">
              <el-form-item label="商品" prop="goodsId">
                <el-select
                  v-model="goodsId"
                  filterable
                  remote
                  reserve-keyword
                  @change="exchangeGoodsWay"
                  placeholder="根据商品名、ID、编码查询"
                  :remote-method="remoteMethod"
                  :loading="exchangeSelectloading"
                >
                  <el-option
                    v-for="item in GoodsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.product"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          <el-col :span="11">
            <el-form-item label="商品数量" prop="buy_number">
              <el-input
                type="text"
                placeholder="请输入商品数量"
                show-word-limit
                clearable
                v-model.trim="exchangeForm.buy_number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
                clearable
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="exchangeForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exchangeDialog = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="aftersalesLoading"
          @click="exchangeSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 退款弹框弹框 -->
    <el-dialog
      :append-to-body="true"
      title="退款信息"
      :close-on-click-modal="false"
      :visible.sync="refundDialog"
      width="700px"
      @close="refundclose"
    >
      <el-row style="position: relative" v-loading="refundLoading">
        <el-form
          label-width="100px"
          :model="refundform"
          :rules="refundRules"
          ref="refundform"
        >
          <!-- <el-col :span="11">
              <el-form-item label="退单数量" prop="refund_number">
                <el-input
                  type="Number"
                  min="0"
                  placeholder="请输入退单数量"
                  show-word-limit
                  v-model.trim="refundform.refund_number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="退款金额" prop="price_total">
                <el-input
                  type="Number"
                  min="0"
                  placeholder="请输入退款金额"
                  show-word-limit
                  v-model.trim="refundform.price_total"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="退款积分" prop="points_total">
                <el-input
                  type="Number"
                  min="0"
                  placeholder="请输入退款积分"
                  show-word-limit
                  v-model.trim="refundform.points_total"
                ></el-input>
              </el-form-item>
            </el-col> -->
          <el-col :span="11">
            <el-form-item label="退款提货券" prop="coupon_total">
              <el-input
                type="Number"
                min="0"
                placeholder="请输入退款提货券"
                show-word-limit
                v-model.trim="refundform.coupon_total"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="refundform.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="refundLoading" @click="refundSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="协商记录"
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="recordDialog"
      width="500px"
    >
      <el-row :gutter="20" style="position: relative" v-loading="recordLoading">
        <el-col :span="22" v-if="recordList.length !== 0">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in recordList"
              :key="index"
              :timestamp="item.created_at"
              placement="top"
            >
              <el-card>
                <el-descriptions :column="2">
                  <el-descriptions-item label="处理来源">
                    <el-tag size="mini" v-if="item.from_type == 1">平台</el-tag>
                    <el-tag size="mini" v-if="item.from_type == 2"
                      >供货商</el-tag
                    >
                    <el-tag size="mini" v-if="item.from_type == 3">用户</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="日志类别">
                    <el-tag size="mini" v-if="item.from_type == 1"
                      >普通日志</el-tag
                    >
                    <el-tag size="mini" v-if="item.from_type == 2"
                      >退回地址记录</el-tag
                    >
                    <el-tag size="mini" v-if="item.from_type == 3"
                      >商品寄回日志</el-tag
                    >
                    <el-tag size="mini" v-if="item.from_type == 4"
                      >商品发货日志</el-tag
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">
                    {{ item.remark }}
                  </el-descriptions-item>

                  <el-descriptions-item
                    label="图片"
                    v-if="item.imgs.length !== 0"
                  >
                    <div
                      v-for="(items, indexs) in item.imgs"
                      :key="indexs"
                      style="width: 30px; height: 30px; margin: 5px"
                    >
                      <el-image
                        v-if="items"
                        :src="items"
                        :preview-src-list="[items]"
                      />
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-empty v-else description="暂无记录"></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="recordLoading"
          type="primary"
          @click="recordDialog = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <el-drawer
    :modal-append-to-body="false"
    :append-to-body="true"
    title="订单信息"
    size="60%"
    :withHeader="false"
    :visible.sync="detailsDrawer"
    @close="CloseDialogGrouping"
    :show-close="true"
    >
    <div style="position: relative;margin-bottom: 0px;">
      <div class="drawerTitle">
        <span>订单信息</span>
        <div class="close" @click="CloseDialogGrouping">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
    </div>
      <div style="position: relative; padding: 30px" v-loading="detailsLoading">
        <el-descriptions
          :column="2"
          style="margin-top: 10px"
        >
          <el-descriptions-item :span="1">
            <template slot="label"> 订单号 </template>
            {{
              detailsInfo.refund_order_no ? detailsInfo.refund_order_no : "-"
            }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 支付单号 </template>
            {{ detailsInfo.pay_order_no ? detailsInfo.pay_order_no : "-" }}
          </el-descriptions-item> -->
          <el-descriptions-item :span="1">
            <template slot="label"> 类别 </template>
            <el-tag v-if="detailsInfo.type == 1" size="mini">仅退款</el-tag>
            <el-tag v-if="detailsInfo.type == 2" size="mini">退货退款</el-tag>
            <el-tag v-if="detailsInfo.type == 3" size="mini">换货</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label"> 退货数量 </template>
            {{ detailsInfo.refund_number ? detailsInfo.refund_number : "-" }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 总金额 </template>
            {{ detailsInfo.price_total ? detailsInfo.price_total : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 总积分 </template>
            {{ detailsInfo.points_total ? detailsInfo.points_total : "-" }}
          </el-descriptions-item> -->
          <el-descriptions-item :span="1">
            <template slot="label"> 总提货券 </template>
            {{ detailsInfo.coupon_total ? detailsInfo.coupon_total : "-" }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 用户昵称 </template>
            {{ detailsInfo.user_nickname ? detailsInfo.user_nickname : "-" }}
          </el-descriptions-item> -->
          <el-descriptions-item :span="1">
            <template slot="label"> 申请时间 </template>
            {{ detailsInfo.created_at ? detailsInfo.created_at : "-" }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 售后状态 </template>
            <el-tag
              v-if="detailsInfo.status == 0 && detailsInfo.is_lock == 0"
              type="warning"
              >待处理</el-tag
            >
            <el-tag v-if="detailsInfo.status == 1" type="info">处理中</el-tag>
            <el-tag v-if="detailsInfo.status == 2" type="success"
              >处理完成</el-tag
            >
            <el-tag v-if="detailsInfo.status == 3" type="danger">已驳回</el-tag>
            <el-tag v-if="detailsInfo.status == 4" type="danger"
              >取消申请</el-tag
            >
            <el-tag
              v-if="detailsInfo.status == 0 && detailsInfo.is_lock == 1"
              type="danger"
              >已锁定</el-tag
            >
          </el-descriptions-item> -->

          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 供货商处理状态 </template>
            <el-tag v-if="detailsInfo.supply_status == 0" type="danger"
              >未处理</el-tag
            >
            <el-tag v-if="detailsInfo.supply_status == 1" type="success"
              >已重新发货</el-tag
            >
            <el-tag v-if="detailsInfo.supply_status == 3" type="info"
              >确认收到货</el-tag
            >
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 用户状态 </template>
            <el-tag v-if="detailsInfo.user_status == 0" type="info"
              >申请中</el-tag
            >
            <el-tag v-if="detailsInfo.user_status == 1">已寄回货物</el-tag>
            <el-tag v-if="detailsInfo.user_status == 2" type="success"
              >已收到换货</el-tag
            >
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="3">
            <template slot="label"> 售后原因 </template>
            {{ detailsInfo.apply_reason ? detailsInfo.apply_reason : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="3">
            <template slot="label"> 售后图片 </template>
            <div
              v-for="(item, index) in detailsInfo.apply_imgs
                ? detailsInfo.apply_imgs
                : []"
              :key="index"
              style="width: 40px; height: 40px; margin: 0 5px"
            >
              <el-image :src="item" :preview-src-list="item"> </el-image>
            </div>
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="3">
            <template slot="label"> 协商记录 </template>
            <el-button
              @click="recordDialogWay(detailsInfo)"
              style="margin: 5px"
              type="text"
              size="mini"
            >
              查看
            </el-button>
          </el-descriptions-item> -->
        </el-descriptions>
        <el-descriptions
          :column="2"


          style="margin-top: 10px"
        >
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 供货商名称 </template>
            {{ detailsInfo.supplier_name ? detailsInfo.supplier_name : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 供货商ID </template>
            {{ detailsInfo.supplier_id ? detailsInfo.supplier_id : "-" }}
          </el-descriptions-item> -->
          <el-descriptions-item :span="1">
            <template slot="label"> 商户名称 </template>
            {{ detailsInfo.mer_name ? detailsInfo.mer_name : "-" }}
          </el-descriptions-item>
          <el-descriptions-item :span="1">
            <template slot="label"> 商户ID </template>
            {{ detailsInfo.mer_id ? detailsInfo.mer_id : "-" }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 商品名称 </template>
            {{ detailsInfo.goods_name ? detailsInfo.goods_name : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 规格名称 </template>
            {{ detailsInfo.product_sku ? detailsInfo.product_sku : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 规格单位 </template>
            {{ detailsInfo.product_unit ? detailsInfo.product_unit : "-" }}
          </el-descriptions-item> -->
          <!-- <el-descriptions-item :span="1">
            <template slot="label"> 规格零售价 </template>
            {{
              detailsInfo.product_retail_price
                ? detailsInfo.product_retail_price
                : "-"
            }}
          </el-descriptions-item> -->
        </el-descriptions>
        <el-row>
          <el-col>
            <el-button
              v-if="detailsInfo.status == 0 && detailsInfo.is_lock == 0"
              style="margin: 5px"
              type="primary"
              size="mini"
              @click="drawerHandle(detailsInfo)"
            >
              审核
            </el-button>
            <el-button
              v-if="
                detailsInfo.status == 1 &&
                detailsInfo.type == 2 &&
                detailsInfo.user_status == 1 &&
                detailsInfo.supply_status != 1
              "
              style="margin: 5px"
              type="warning"
              size="mini"
              @click="confirmHandle(detailsInfo)"
            >
              确认寄回
            </el-button>
            <el-button
              v-if="
                detailsInfo.status == 1 &&
                detailsInfo.type == 3 &&
                !detailsInfo.new_product_id
              "
              style="margin: 5px"
              type="warning"
              size="mini"
              @click="exchangeHandle(detailsInfo)"
            >
              确认换货
            </el-button>
            <el-button
              v-if="
                detailsInfo.status == 1 &&
                detailsInfo.type == 2 &&
                detailsInfo.supply_status == 1
              "
              style="margin: 5px"
              type="warning"
              size="mini"
              @click="refundHandle(detailsInfo)"
            >
              退款
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

    <script>
import {
  getSelfList,
  getSelfVerify,
  getSelfConfirmReturn,
  refundAddRefundNewOrder,
  selfConfirmRefundBack,
  getRefundHistoryList,
  getSelfDetail,
} from "@/api/order/index";
import {
  getGoodsList,
  getPublicSupplierAddressList,
  getShippingAddress,
} from "@/api/index";
import LogoUpload from "@/components/FileUpload";
const tableTheadOption = {
  created_at: {
    label: "申请时间",
    field: "created_at",
  },
  mer_order_no: {
    label: "订单号",
    field: "mer_order_no",
  },
  refund_order_no: {
    label: "退货单号",
    field: "refund_order_no",
  },
  mer_id: {
    label: "商户ID",
    field: "mer_id",
  },
  mer_name: {
    label: "商户名称",
    field: "mer_name",
  },
  product_name: {
    label: "商品名称",
    field: "product_name",
  },
  sku_img: {
    label: "规格图片",
    field: "sku_img",
  },
  sku_name: {
    label: "规格名称",
    field: "sku_name",
  },
  coupon_unit: {
    label: "提货券单价",
    field: "coupon_unit",
  },
  refund_number: {
    label: "退货数量",
    field: "refund_number",
  },
  coupon_total: {
    label: "总提货券",
    field: "coupon_total",
  },
  type: {
    label: "售后类别",
    field: "type",
  },
};
const allTableThead = [
  "created_at",
  "mer_order_no",
  "refund_order_no",
  "mer_id",
  "mer_name",
  "product_name",
  "sku_img",
  "sku_name",
  "coupon_unit",
  "refund_number",
  "coupon_total",
  "type",
  // "status",
];
const defaultTableThead = [
  "created_at",
  "mer_order_no",
  "refund_order_no",
  "mer_name",
  "product_name",
  // "sku_img",
  // "sku_name",
  "coupon_unit",
  "refund_number",
  "coupon_total",
  "type",
];
export default {
  props: {
    detailsobj: {
      type: Object,
      default: {},
    },
  },
  components: { LogoUpload },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      searchForm: {
        status: "", // 售后状态检索：0=发起申请；1=处理中；2=处理完成；3=审核未通过；4=取消申请
        refund_order_no: "", // 根据退款订单号筛选
        order_trade_no: "", // 根据订单流水号检索
        pay_order_no: "", // 根据订单支付单号检索
        pay_service: "", // 根据支付方式检索：1=余额支付；2=支付宝；3=微信
        user_id: "", // 根据用户ID筛选
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", // 申请起始时间（例：2023-10-01 12:20）
        create_time_end: "", // 	申请截至时间（例：2023-10-02 12:20）
        verify_time_start: "", // 审核起始时间（例：2023-10-01 12:20）
        verify_time_end: "", // 审核截至时间（例：2023-10-02 12:20）
        complete_time_start: "", // 退款完成起始时间（例：2023-10-01 12:20）
        complete_time_end: "", // 退款完成截至时间（例：2023-10-02 12:20）
        pay_time_start: "", // 支付起始时间
        pay_time_end: "", // 支付截至时间
        count: 10,
        page: 1,
      },
      create_time: [],
      verify_time: [],
      complete_time: [],
      pay_time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      RefundList: [],
      total: 0,
      aftersalesDialog: false,
      aftersalesLoading: false,
      aftersalesForm: {
        refund_id: "", // 售后订单ID
        status: 1, // 平台处理状态：1=同意售后申请；2=拒绝售后申请
        remark: "", // 处理备注/意见
        is_lock: "", // （拒绝售后申请）是否锁定订单：1=锁定；0=不锁定
        return_type: 2, // （同意售后申请 - 退换货必填）用户退回的对象：1=退回给平台，2=退回给原供货商
        return_address_id: "", // （同意售后申请 - 退换货必填）用户退回的地址【若是平台，选择平台的地址；若是供货商，选择供货商的退回地址】
      },

      orderInfo: {}, // 当亲操作的订单信息
      aftersalesRules: {
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择审核状态"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_lock: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.aftersalesForm.status == 2) {
                if (value === "") {
                  callback(new Error("请选择是否锁定订单"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        return_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.aftersalesForm.status == 1 && this.orderInfo.type != 1) {
                if (value === "") {
                  callback(new Error("请选择退回渠道"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        return_address_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.aftersalesForm.status == 1 &&
                this.orderInfo.type !== 1
              ) {
                if (value === "") {
                  callback(new Error("请输入退回渠道地址"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      confirmDialog: false,
      confirmLoading: false,
      confirmForm: {
        refund_id: "",
        refund_number: "",
        remark: "",
        imgs: "",
      },
      imgs: [],
      confirmRules: {
        refund_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入收到货物数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      exchangeDialog: false,
      exchangeLoading: false,
      exchangeSelectloading: false,
      GoodsList: [],
      exchangeForm: {
        refund_id: "",
        product_id: "",
        buy_number: "",
        remark: "",
      },
      goodsId: "",
      exchangeRules: {
        goodsId: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择商品"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        buy_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入收到货物数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      refundDialog: false,
      refundLoading: false,
      refundform: {
        refund_id: "",
        refund_number: "",
        price_total: "",
        points_total: "",
        coupon_total: "",
        remark: "",
      },
      refundRules: {
        refund_number: [
          {
            required: false,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入退单数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
        price_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        points_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        coupon_total: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
      },
      recordLoading: false,
      recordDialog: false,
      recordList: [],

      detailsDrawer: false,
      detailsLoading: false,
      detailsInfo: {},

      supplierAddressList: [], // 供货商地址
      supplierLoading: false,
      ShippingAddressList: [], // 平台地址
    };
  },
  created() {
    this.searchForm.supplier_id = this.detailsobj.id;
    this.getListWay();
  },
  methods: {
    CloseDialogGrouping(){
      this.detailsDrawer = false
    },
    getListWay() {
      this.loading = true;
      getSelfList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.RefundList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resetting() {
      this.searchForm = {
        status: "", // 售后状态检索：0=发起申请；1=处理中；2=处理完成；3=审核未通过；4=取消申请
        refund_order_no: "", // 根据退款订单号筛选
        order_trade_no: "", // 根据订单流水号检索
        pay_order_no: "", // 根据订单支付单号检索
        pay_service: "", // 根据支付方式检索：1=余额支付；2=支付宝；3=微信
        user_id: "", // 根据用户ID筛选
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", // 申请起始时间（例：2023-10-01 12:20）
        create_time_end: "", // 	申请截至时间（例：2023-10-02 12:20）
        verify_time_start: "", // 审核起始时间（例：2023-10-01 12:20）
        verify_time_end: "", // 审核截至时间（例：2023-10-02 12:20）
        complete_time_start: "", // 退款完成起始时间（例：2023-10-01 12:20）
        complete_time_end: "", // 退款完成截至时间（例：2023-10-02 12:20）
        pay_time_start: "", // 支付起始时间
        pay_time_end: "", // 支付截至时间
        pageSize: 10,
        page: 1,
      };
      this.searchForm.supplier_id = this.detailsobj.id;
      this.create_time = [];
      this.pay_time = [];
      this.getListWay();
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    complete_timeWay(vla) {
      this.searchForm.complete_time_start = vla[0];
      this.searchForm.complete_time_end = vla[1];
    },
    verify_timeWay(vla) {
      this.searchForm.verify_time_start = vla[0];
      this.searchForm.verify_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    drawerHandle(row) {
      this.aftersalesDialog = true;
      this.aftersalesLoading = true;
      getSelfDetail({ id: row.id }).then((res) => {
        this.orderInfo = res.data;
        this.orderInfo.id = row.id;
        console.log(this.orderInfo, "this.orderInfo");
        this.aftersalesForm.refund_id = this.orderInfo.id;
        if (this.orderInfo.type == 1) {
          this.aftersalesForm.return_type = "";
        }
        this.return_typeChange(2);

        this.aftersalesLoading = false;
      });
    },
    statusWay(val) {
      if (val == 2) {
        this.aftersalesForm.is_lock = 0;
      } else {
        this.aftersalesForm.is_lock = "";
      }
    },
    detailsDrawerWay(row) {
      this.detailsDrawer = true;
      this.detailsLoading = true;
      this.detailsInfo = JSON.parse(JSON.stringify(row));
      this.detailsLoading = false;
    },
    aftersalesClose() {
      this.aftersalesForm = {
        refund_id: "", // 售后订单ID
        status: 1, // 平台处理状态：1=同意售后申请；2=拒绝售后申请
        remark: "", // 处理备注/意见
        is_lock: "", // （拒绝售后申请）是否锁定订单：1=锁定；0=不锁定
        return_type: 2, // （同意售后申请 - 退换货必填）用户退回的对象：1=退回给平台，2=退回给原供货商
        return_address_id: "", // （同意售后申请 - 退换货必填）用户退回的地址【若是平台，选择平台的地址；若是供货商，选择供货商的退回地址】
      };
      this.aftersalesDialog = false;
    },
    return_typeChange(val) {
      this.aftersalesForm.return_address_id = "";
      if (val == 1) {
        this.supplierRemoteMethods();
      } else {
        this.supplierRemoteMethod(this.orderInfo.supplier.supplier_id);
      }
    },
    supplierRemoteMethod(query) {
      this.supplierLoading = true;
      getPublicSupplierAddressList({ supplier_id: query }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.supplierLoading = false;
          return this.$messages.error(res.msg);
        }
        if (res.data.list.length !== 0) {

          res.data.list.forEach((item) => {

            if (item.is_default == 1) {
              if (!this.aftersalesForm.return_address_id) {
                this.aftersalesForm.return_address_id = item.id;
              }
              // this.aftersalesForm.return_address_id = item.id;
            }
          });
          this.supplierAddressList = res.data.list;
          // if (!this.aftersalesForm.return_address_id) {
          //   this.aftersalesForm.return_address_id = item.id;
          // }
        }

        this.supplierLoading = false;
      });
    },
    supplierRemoteMethods() {
      this.supplierLoading = true;
      getShippingAddress().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.supplierLoading = false;
          return this.$messages.error(res.msg);
        }
        res.data.list.forEach((item) => {
          if (item.is_default == 1) {
            this.aftersalesForm.return_address_id =
              item.province_name +
              item.district_name +
              item.city_name +
              item.address_details;
          }
        });
        this.supplierAddressList = res.data.list;
        if (!this.aftersalesForm.return_address_id) {
          this.aftersalesForm.return_address_id =
            res.data.list[0].province_name +
            res.data.list[0].district_name +
            res.data.list[0].city_name +
            res.data.list[0].address_details;
        }
        this.supplierLoading = false;
      });
    },
    aftersalesSubmit() {
      this.$refs.aftersalesForm.validate((valid) => {
        if (valid) {
          this.aftersalesLoading = true;
          this.aftersalesForm.id = this.aftersalesForm.refund_id;
          getSelfVerify(this.aftersalesForm).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.aftersalesLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.aftersalesLoading = false;
            this.aftersalesDialog = false;
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },

    confirmClose() {
      this.confirmForm = {
        refund_id: "",
        refund_number: "",
        remark: "",
        imgs: "",
      };
      this.imgs = [];
    },
    imgsCallback(file) {
      this.imgs = file;
    },
    confirmHandle(row) {
      this.confirmForm.refund_id = row.id;
      this.confirmForm.refund_number = row.refund_number;
      this.confirmDialog = true;
    },
    confirmSubmit() {
      this.$refs.confirmForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          var arr = [];
          this.imgs.forEach((item) => {
            arr.push(item.url);
          });
          this.confirmForm.imgs = arr.toString();
          var obj = {
            id: this.confirmForm.refund_id,
            remark: this.confirmForm.remark,
            info: this.confirmForm.imgs,
          };
          getSelfConfirmReturn(obj).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.confirmLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.confirmLoading = false;
            this.confirmDialog = false;
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },
    exchangeHandle(row) {
      this.exchangeDialog = true;
      this.exchangeLoading = true;
      this.exchangeForm.refund_id = row.id;
      getGoodsList({ count: 20, page: 1 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.GoodsList = [];
          this.exchangeLoading = false;
          return this.$messages.error(res.msg);
        }
        this.exchangeLoading = false;
        this.GoodsList = res.data.list;
      });
    },
    exchangeClose() {
      this.exchangeForm = {
        refund_id: "",
        product_id: "",
        buy_number: "",
        remark: "",
      };
      this.exchangeDialog = false;
    },
    remoteMethod(query) {
      this.exchangeSelectloading = true;
      getGoodsList({ count: 20, page: 1, keywords: query }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.aftersalesLoading = false;
          this.GoodsList = [];
          return this.$messages.error(res.msg);
        }
        this.GoodsList = res.data.list;
      });
    },
    exchangeGoodsWay(val) {
      this.exchangeForm.product_id = val[0].id;
    },
    exchangeSubmit() {
      this.$refs.exchangeForm.validate((valid) => {
        if (valid) {
          this.aftersalesLoading = true;
          var obj = {
            id: this.exchangeForm.refund_id,
            buy_number: this.exchangeForm.buy_number,
            remark: this.exchangeForm.remark,
          };
          refundAddRefundNewOrder(obj).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.aftersalesLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.aftersalesLoading = false;
            this.exchangeDialog = false;
            this.getListWay();
          });
        }
      });
    },
    refundHandle(row) {
      this.refundform.refund_id = row.id;
      // this.refundform.refund_number = row.refund_number;
      // this.refundform.price_total = row.product_retail_price;
      // this.refundform.points_total = row.points_total;
      this.refundform.coupon_total = row.coupon_total;
      this.refundDialog = true;
    },
    refundclose() {},
    refundSubmit() {
      this.$refs.refundform.validate((valid) => {
        if (valid) {
          this.refundLoading = true;
          var obj = {
            id: this.refundform.refund_id,
            coupon_total: this.refundform.coupon_total,
            remark: this.refundform.remark,
          };
          selfConfirmRefundBack(obj).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.refundLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.refundDialog = false;
            this.refundform = {
              detail_id: "",
              price_total: "",
              points_total: "",
              coupon_total: "",
              reason: "",
            };
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },
    recordDialogWay(row) {
      this.recordDialog = true;
      this.recordLoading = true;
      getRefundHistoryList({ refund_id: row.refund_id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.recordLoading = false;
          return this.$messages.error(res.msg);
        }
        this.recordLoading = false;
        this.recordList = res.data;
      });
    },
  },
};
</script>

    <style>
#addgoods .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

#addgoods .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>
  <style lang="scss">
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }
  .el-input {
    width: 180px;
  }
}
</style>
    <style lang="scss" scoped>
// .app-container {
//   background-color: #fff !important;
// }
.marginBottom-10 {
  margin-bottom: 10px;
}
.marginRight-10 {
  margin-right: 10px;
}
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;
  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }
  .reset-box {
    background: #eeeeee;
  }
}
.app-container {
  background: #f3f5f7;
  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    .title-module {
      font-size: 18px;
    }
    .search-module {
      padding-top: 20px;
      display: block;
    }
    .table-module {
      .table-top {
        margin-bottom: 20px;
      }
      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>
